<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: black;
        }
        img{
            position: absolute;
        }
    </style>
</head>
<body>

<!--引入jQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //开启定时器添加雪花图片
    setInterval(function () {
let img=$("<img src='../snow.png'>");
$("body").append(img);

    //得到20-40的随机大小  0-20  +20
        let size=parseInt(Math.random()*21)+20;
        img.css("width",size+"px")
        //让雪花随机出现在屏幕的顶部
        //得到屏幕的宽度
        let w=$(window).width();
        let left=parseInt(Math.random()*(w-size));
        img.css("left",left+"px");
        //让雪花从上往下移动
        //得到屏幕的高度
        let top=$(window).height()-size;
        // 20-40  2000  4000
        img.animate({"top":top+"px"},size*100)
                    .fadeOut(1000,function () {
                    //从页面中删除  避免越来越慢
                        img.remove();
                    });

    },10);
</script>
</body>
</html>